<template>
  <div>
    <el-card>
      <el-select v-model="value" placeholder="请选择班级" >
        <el-option v-for="item,x in select" :key="x" :label="item.className" :value="item.id"></el-option>
      </el-select>
      <el-select v-model="valuet" placeholder="请选择学生" style="margin-left: 1.5625rem;" :disabled="now" >
        <el-option v-for="item,x in select2" :key="x" :label="item.name" :value="item.id"></el-option>
      </el-select>
    </el-card>
    <el-card style="margin-top: 1.5625rem;" v-if="stuT">
      <table-body ref="grPsn" :grParam="grParam" :path="path" :addBtn="addBtn">
         <template v-slot:tableBody>
           <el-table-column
              prop="course.courseName"
              label="课程"
              width="250">
           </el-table-column>
           <el-table-column
              prop="grade"
              label="成绩">
              <template slot-scope="scope">
                <el-input v-model="scope.row.grade" @change="up(scope.row)"></el-input>
              </template>
           </el-table-column>
         </template>
      </table-body>
    </el-card>
  </div>
</template>

<script>
  import tableBody from "../components/tableBody.vue"
  export default{
    components:{tableBody},
    data() {
      return {
        value:'',
        valuet:'',
        select:{},
        select2:{},
        scope:{
          row:{
            grade:''
          }
        },
        now:true,
        nao:true,
        grPsnParam:{
          tbclassId:'',
          courseId:'',
        },
        grParam:{
          tbClassId:'',
          studentId:'',
        },
        grParamT:{
          grade:'',
          id:''
        },
        stuT:false,
        path:'grade',
        addBtn:false,

      }
    },
    methods: {
      up(row){
        this.grParamT.id=row.id
        this.grParamT.grade=row.grade
        this.$ajax.post('grade/upNow',this.grParamT).then(res=>{
          var result = res.data;
          if (result.success) {
            this.$notify({
              type:'success',
              title: '提示',
              message: '数据修改成功',
              position: 'bottom-right'
            });
            }else{
              this.$notify({
                type:'error',
                title: '提示',
                message: '数据修改失败',
                position: 'bottom-right'
              });
            }
        }).catch(err=>{})
      },
      selo() {
        this.$ajax.post('tbclass/page',{}).then(res=>{
          var result = res.data;
          if (result.success) {
            this.select=result.data.rows;
          }
        }).catch(err=>{})
      },
      selt(){
        this.$ajax.post('student/page',this.grPsnParam).then(res=>{
          var result = res.data;
          if (result.success) {
            this.select2=result.data.rows;
          }
        }).catch(err=>{})
      },
    },
    mounted() {
      this.selo()
    },
    watch: {
      value(newValue, oldValue) {
        if (newValue.length!=0) {
          this.grPsnParam.tbclassId=newValue
          this.selt()
          this.now=false
          this.stuT=false
          this.valuet=''
        }
      },
      valuet(newValue, oldValue){
        if (newValue.length!=0) {
          this.grParam.tbclassId=this.value
          this.grParam.studentId=this.valuet
          this.stuT=true
         
        }
      },
    },
  }
</script>

<style>
</style>
